<template>
  <div style="height: 100%;">
    <div class="app-content phm-from">
      <!-- 暂时去掉 'parameterClass', 去掉 deviceStatus，selectLeix-->
      <ContentForm name="缺陷库">
        <serch-top
          slot="searchform"
          ref="searchtop"
          :show-option="searchOptions"
          :current-query="formParams"
          @search="getSearchCondition" />

        <div ref="hgetter" slot="valueform" class="tableContainer widthPage" :class="{ foremZank: isActive }" style="height: calc(100% - 42px);">
          <div v-loading="loading" class="h-getter" style="height: calc(100%);">
            <el-table
              id="dataTable"
              border
              :data="tableDataDefectPlus"
              height="100%"
              style="width: 100%;">
              <el-table-column
                type="index"
                label="序号"
                sortable
                width="70"
                show-overflow-tooltip
                align="center" />
              <el-table-column
                prop="lineAttr.lineName"
                label="线路"
                sortable
                width="100"
                show-overflow-tooltip
                align="center" />
              <el-table-column
                prop="siteAttr.siteName"
                label="区间站场"
                sortable
                width="100"
                show-overflow-tooltip
                align="center" />
              <!-- <el-table-column
              prop="anchorAttr.anchorNum"
              label="锚段号"
              sortable
              width="100"
              show-overflow-tooltip
              align="center" /> -->
              <el-table-column
                prop="directionAttr.directionName"
                label="行别"
                sortable
                width="100"
                show-overflow-tooltip
                align="center" />
              <el-table-column
                prop="pillarAttr.pillarNum"
                label="支柱号"
                sortable
                width="100"
                show-overflow-tooltip
                align="center" />
              <el-table-column
                prop="deptAttr.deptName"
                label="所属工区"
                align="center"
                show-overflow-tooltip
                sortable
                width="150" />
              <el-table-column
                prop="userDefectTypeAttr.userDefectTypeName"
                label="缺陷分类"
                sortable
                width="100"
                show-overflow-tooltip
                align="center" />
              <el-table-column
                prop="gradeAttr.userGradeName"
                label="缺陷等级"
                align="center"
                show-overflow-tooltip
                sortable
                width="100" />
              <el-table-column
                prop="gatherTypeAttr.typeName"
                label="缺陷来源"
                align="center"
                sortable
                show-overflow-tooltip
                width="100" />
              <el-table-column
                prop="finder"
                label="发现人"
                align="center"
                show-overflow-tooltip
                sortable
                width="100" />
              <el-table-column
                prop="findDt"
                label="发现日期"
                show-overflow-tooltip
                align="center"
                sortable
                width="100" />
              <el-table-column
                prop="desc"
                label="缺陷描述"
                align="center"
                show-overflow-tooltip
                sortable />
              <el-table-column
                prop="defectStatusName"
                label="处理状态"
                align="center"
                show-overflow-tooltip
                sortable
                width="100" />
              <el-table-column
                prop="solvePerson"
                label="处理人"
                show-overflow-tooltip
                align="center"
                sortable
                width="100" />
              <el-table-column
                prop="solveDt"
                label="处理日期"
                align="center"
                show-overflow-tooltip
                sortable
                width="100" />
              <el-table-column
                width="100"
                align="center"
                label="操作"
                fixed="right">
                <template slot-scope="scope">
                  <a class="el-icon-view" @click="detectId = tableDataDefect[scope.$index]._id;isActive = !isActive" />
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="block">
            <Pagination
              :hidden="false"
              :total="total"
              :page.sync="queryParams.page"
              :size.sync="queryParams.size"
              @pagination="findHistoryDefect(queryParams)" />
          </div>
        </div>
      </ContentForm>
      <div v-show="play" class="formColumn">
        <div class="formColumn-div">
          <p class="formColumn-top">选择列<i class="el-icon-close formColumn-guan" @click="play = !play" /></p>
          <div class="formColumn-neir">
            <ul>
              <li>工作票号</li>
              <li>计划号</li>
              <li>检修项目</li>
              <li>作业地点</li>
              <li>日期</li>
              <li>申请时间</li>
              <li>行调时间</li>
              <li>电调时间</li>
              <li>电调时间</li>
              <li>电调时间</li>
              <li>电调时间</li>
            </ul>
          </div>
          <el-button size="mini" class="formColumn-button1" type="primary" icon="el-icon-refresh">重置</el-button>
          <el-button size="mini" class="formColumn-button2" type="primary" icon="el-icon-circle-check-outline">确定</el-button>
        </div>
      </div>

    </div>
    <div class="phm-tanc" :class="{ phmtancshow: isActive }">
      <p class="phm-tanc-top"><span class="el-icon-close" @click="isActive=!isActive" />缺陷详情</p>
      <formtable v-if="isActive && detectId" :detect-id="detectId" />
    </div>
  </div>

</template>

<script>
import dayjs from 'dayjs'
import Formtable from './TableForem'
import SerchTop from './SearchTop'
import { findHistoryDefect } from '@/api/cms/detect-data/information'
export default {
  components: {
    Formtable,
    SerchTop
  },
  props: {
    hideHeader: {
      type: Boolean,
      default: false
    },
    params: Object,
    fatal: String,
    reasonType: String,
    parameterClass: Number,
    datePoint: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      searchOptions: ['selectQuex', 'selectBmCode', 'selectLin', 'selectQujian', 'selectLaiy', 'gradeCode', 'selectZuangt', 'selectShijA', 'pillarCode', 'buttondaoc'],
      loading: false,
      showDetail: false,
      play: false,
      detectId: '',
      isActive: false,
      fomSlect1: '',
      tableDataDefect: [],
      statusTypeList: ['', '部件状态', '部件安装状态', '零件状态', '零件安装状态'],
      gatherTypeList: ['', '检修', '巡视', '检测', '检验', '其它'],
      formParams: {}, // 用于查询条件回显
      queryParams: {
        page: 1,
        size: 20
      },
      total: 0
    }
  },
  computed: {
    tableDataDefectPlus: function() {
      var result = JSON.parse(JSON.stringify(this.tableDataDefect))
      result.forEach((row) => {
        row.gatherTypeAttr.typeName = this.gatherTypeList[row.gatherTypeAttr.typeClass || 0]
      })
      return result
    }
  },
  created() {
    if (this.hideHeader) {
      this.searchOptions = ['parameterClass', 'deviceStatus', 'selectLeix', 'selectQuex', 'selectBmCode', 'selectLin', 'selectQujian', 'selectLaiy', 'gradeCode', 'selectZuangt', 'selectShijA', 'pillarCode', 'buttondaoc']
    }
    const params = Object.assign({}, this.params, this.$route.query)
    if (this.datePoint) {
      params.startDate = this.datePoint
      params.endDate = this.datePoint
    } else if (JSON.stringify(params) === '{}') {
      // 页面无参数 默认本月
      // const start = dayjs().format('YYYY-MM') + '-01'
      // const end = dayjs(dayjs().add(1, 'month').format('YYYY-MM') + '-01').subtract(1, 'day').format('YYYY-MM-DD')
      // this.queryParams.startFindDate = start
      // this.queryParams.endFindDate = end
      // this.formParams.selectShij = [start, end]
    }
    if (params) { // 匹配参数
      if ((params.startDate || params.beginDate) && params.endDate) {
        const start = dayjs(params.startDate || params.beginDate).format('YYYY-MM-DD')
        let end = ''
        if (params.searchTimeFlag !== 'day' && params.searchTimeFlag !== 1) {
          end = dayjs(params.endDate).add(1, 'month').subtract(1, 'day').format('YYYY-MM-DD')
        } else {
          end = dayjs(params.endDate).format('YYYY-MM-DD')
        }
        this.queryParams.startFindDate = start
        this.queryParams.endFindDate = end
        this.formParams.selectShij = [start, end]
      }
      if (params.lineCode) {
        this.queryParams.lineCode = params.lineCode
        this.formParams.lineCode = params.lineCode
      }
      if (params.siteCode) {
        this.queryParams.siteCode = params.siteCode
        this.formParams.lineSiteCode = params.siteCode
      }
      if (params.gradeCode) {
        this.queryParams.gradeCode = params.gradeCode
        this.formParams.gradeCode = params.gradeCode
      }
      if (params.statusType) {
        this.queryParams.statusType = params.statusType
        this.formParams.statusType = params.statusType
      }
      if (params.statusCode) {
        this.queryParams.statusCode = params.statusCode
        this.formParams.statusCode = params.statusCode
      }
      if (params.typeClass) {
        this.queryParams.typeClass = params.typeClass
        this.formParams.typeClass = params.typeClass
      }
      if (params.devClassCode) {
        this.queryParams.devClassCode = params.devClassCode
        this.formParams.devClassCode = params.devClassCode
      }
      if (params.attCode) {
        this.queryParams.attCode = params.attCode
        this.formParams.attCode = params.attCode
      }
      if (params.searchDefectStatus) {
        this.queryParams.searchDefectStatus = params.searchDefectStatus
        this.formParams.selectZuangt = params.searchDefectStatus
      }
      if (params.workAreaCode || params.workshopCode || params.sectionCode) {
        const deptCode = params.workAreaCode || params.workshopCode || params.sectionCode
        this.queryParams.deptCode = deptCode
        this.formParams.deptCode = deptCode
        this.formParams.sectionCode = params.sectionCode
      }
      if (params.workShopCode) {
        this.queryParams.deptCode = params.workShopCode
        this.formParams.deptCode = params.workShopCode
      }
      if (this.parameterClass) {
        this.queryParams.parameterClass = this.parameterClass
        this.formParams.parameterClass = this.parameterClass
      }
      if (this.fatal) {
        this.queryParams.fatal = this.fatal
        this.formParams.fatal = this.fatal
      }
      if (this.reasonType) {
        this.queryParams.reasonType = this.reasonType
        this.formParams.reasonType = this.reasonType
      }
    }
  },
  mounted() {
    !this.hideHeader && this.$store.dispatch('app/setPhmMneuStatus', 'allways')
    this.findHistoryDefect()
  },
  methods: {
    findHistoryDefect() {
      this.loading = true
      findHistoryDefect(this.queryParams).then(response => {
        // console.log('关键设备历史缺陷', response)
        if (response.data) {
          console.log(response.data.records)
          this.tableDataDefect = response.data.records || []
          this.total = response.data.total || 0
        } else {
          this.tableDataDefect = []
          this.total = 0
        }
        this.loading = false
      }).catch(e => {
        this.loading = false
      })
    },
    getListAll() {
      findHistoryDefect({ ...this.queryParams, size: 99999 }).then(response => {
        // console.log('关键设备历史缺陷', response)
        if (response.data) {
          this.tableDataDefect = response.data.records || []
          this.total = response.data.total || 0
        } else {
          this.tableDataDefect = []
          this.total = 0
        }
        this.$refs.searchtop.exportExcel()
      })
    },
    getSearchCondition(val) {
      this.queryParams = {
        page: 1,
        size: 20
      }
      this.queryParams.defectTypeId = val.defectTypeId
      this.queryParams.deptCode = val.selectBum
      this.queryParams.gradeCode = val.gradeCode
      this.queryParams.attCode = val.attCode
      this.queryParams.parameterClass = val.parameterClass
      this.queryParams.statusType = val.statusType
      this.queryParams.statusCode = val.statusCode
      this.queryParams.devClassCode = val.devClassCode
      this.queryParams.fatal = val.fatal
      this.queryParams.reasonType = val.reasonType
      this.queryParams.pillarNum = val.pillarCode
      // this.queryParams.specificDefectsCode = val.specificDefectsCode
      // this.queryParams.parameterClass = val.parameterClass
      // this.queryParams.proCode = val.proCode
      const line = val.selectLin
      if (line) {
        const lineCode = line.split('-')[1]
        this.queryParams.lineCode = lineCode
      }
      const site = val.selectQujian
      if (site) {
        const siteCode = site.split('-')[1]
        this.queryParams.siteCode = siteCode
      }
      this.queryParams.typeClass = val.selectLaiy
      this.queryParams.searchDefectStatus = val.selectZuangt
      if (val.selectShij) {
        this.queryParams.startFindDate = dayjs(val.selectShij[0]).format('YYYY-MM-DD')
        this.queryParams.endFindDate = dayjs(val.selectShij[1]).format('YYYY-MM-DD')
      }
      if (val.selectShijA) {
        this.queryParams.startSolveDate = dayjs(val.selectShijA[0]).format('YYYY-MM-DD')
        this.queryParams.endSolveDate = dayjs(val.selectShijA[1]).format('YYYY-MM-DD')
      }
      if (val.size) {
        this.getListAll()
      } else {
        this.findHistoryDefect()
      }
    }
  }
}
</script>
<style scoped>
.phm-tanc-top{
    font-size: 16px;
    height: 42px;
    line-height: 42px;
    color: white;
    padding-left: 10px;
    background: #3a475b;
}
.el-icon-close {
      float: right;
      margin-top: 10px;
      margin-right: 10px;
      font-size: 23px;
      color: white;
      cursor: pointer;
    }
</style>
